<template>
    <transition enter-active-class="animate__animated animate__fadeIn animate__faster"
    leave-active-class="animate__animated animate__fadeOut animate__faster">
        <div class="modal-box" v-show="PopUpShowInfo.show" @click="closeModelPupUp" >
            <div class="internal-limit">
                <div class="content-box">
                    <i class="iconfont" :class="PopUpShowInfo.successShow ? 'icon-zhengquetishi' : 'icon-cuowutishi' "></i>
                    <p class="content">
                        {{ PopUpShowInfo.content }}
                    </p>
                </div>
            </div>

        </div>
    </transition>
</template>

<script>
export default {
    data () {
        return {
            PopUpShowInfo: {
                successShow: false,
                content: '',
                show: false,
            },
        }
    },
    mounted() {
        console.log('创建aaaa');

        this.$bus.$on('openUpPop', bool => {
            console.log('打开aaaa');
            this.PopUpShowInfo = bool;
            this.PopUpShowInfo.show = true
            if (this.PopUpShowInfo.successShow === true) {
                setTimeout(() => {
                    this.PopUpShowInfo.show = false
                },300)
            }
        });
    },
    beforeDestroy() {
        // 销毁自定义事件
        this.$bus.$off(['openUpPop']);
    },
    methods:{
        closePupUp(){
            this.PopUpShowInfo.show = false;
        },
        closeModelPupUp(event) {
            console.log([event.target],'event.target.',event.target.className === 'modal-box');
            if (event.target.className === 'modal-box') {
                console.log(1111111111111);
                this.PopUpShowInfo.show = false;
            }
        }

    }
}
</script>

<style lang="less" scoped>
.modal-box{
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    display: flex;
    justify-content: center;
    align-items: center;
    .internal-limit{
        background-color: white;
        border-radius: 10px;
        padding: 30px;
        min-width: 14rem;
        min-height: 10rem;
        position: relative;

        .title{
            text-align: center;
            font-size: 1.7rem;
            font-family: 600;
        }
        .text{
            padding: 20px;
            position: relative;
            overflow-y: auto;
            max-width: 50rem;
            max-height: 60rem;
        }
        .paragraph{
        }
    }
}
.content-box{
    display: flex;
    flex-direction: column;
    align-items: center;
    .iconfont{
        font-size: 2rem;
        margin-bottom: 1rem;
    }
    .icon-zhengquetishi{
        color: rgb(62, 226, 71);
    }
    .icon-cuowutishi{
        color: rgb(223, 50, 50);
    }
    .content{
        font-size: 1.4rem;
        text-align: center;
        width: 14rem;
    }
}

</style>